
<script setup>
	import {ref} from 'vue'
	
	const props = defineProps({
		id:''
	})
	
	const eidtSetShow = ref(false)
	const show = ref(false)
	const scale = ['♦','♣','♥','♠']
	const btnColor = ref(['#eb6661','#5c5c5c','#b33028','#202020'])
	const setNumberList = ref([])
	const scaleList = ref([])
	const fraction = uniCloud.importObject('addFraction')
	const emit = defineEmits(['changeSetScale'])
	// 处理1 - 13 张牌
	const data = ref()
	for(let i = 0; i < 12; i++){
		data.value = {...data.value,...{[i]:''}}
	}
	
	// 处理 2 的倍数
	const btnObj = ref()
	const btnArr = ref(['♦','♣','♥','♠'])
	for(let i = 0; i < btnArr.value.length; i++){
		btnObj.value = {...btnObj.value,...{[btnArr.value[i]]:''}}
	}
	
	const confirm = () => {
		const isEmpty = Object.values(data.value).every(value => value !== '')
		if(!isEmpty) return uni.$u.toast("请输入1-13张牌数量完整")
		const isEmpty2 = Object.values(btnObj.value).every(value => value !== '')
		if(!isEmpty2) return uni.$u.toast("请输入2倍数 数量完整")
		setNumberList.value = Object.values(data.value).map(Number)
		scaleList.value = Object.values(btnObj.value).map(Number)
		eidtSetShow.value = false
		show.value = true
	}
	
	const handlerConfirm = async () => {
		const res = await fraction.editScaleData(props.id,setNumberList.value,scaleList.value)
		uni.showToast({
			title:'设置成功'
		})
		show.value = false
		console.log('res',res)
		emit('changeSetScale')
	}
	
	defineExpose({eidtSetShow})
</script>

<template>
	<u-modal :show="eidtSetShow"  width="600rpx" showCancelButton
		@confirm="confirm" title="设置比例数量" @cancel="eidtSetShow = false">
		<view class="slot-content">
			<scroll-view class="scroll-view" scroll-y>
				<view class="title"> 1 - 13 张的比例</view>
				<u--form labelPosition="left" :model="data" labelWidth="100rpx">
					<u-form-item :label="item + ':'" borderBottom v-for="(item,index) in 13" :key="index">
							<u--input v-model="data[index]" type="number" border="none" placeholder="请输入比例"></u--input>
					</u-form-item>
				</u--form>
				<view class="title" style="margin-top: 20rpx;">方块2梅花2-红桃2-黑桃2</view>
				<u--form labelPosition="left" :model="btnObj" labelWidth="100rpx">
					<u-form-item :label="item + ':'" borderBottom v-for="(item,index) in btnArr" :key="index">
							<u--input v-model="btnObj[item]" type="number" border="none" placeholder="请输入比例"></u--input>
					</u-form-item>
				</u--form>
			</scroll-view>
		</view>
	</u-modal>
	<u-modal :show="show"  width="650rpx" showCancelButton
		@confirm="handlerConfirm" title="是否使用当前比例" @cancel="show = false">
		<view class="slot-content">
			<view class="title"> 1 - 13 张的比例</view>
			<view class="list">
				<text class="item flex" v-for="(item,index) in setNumberList" :key="index">{{ index + 1  }}:{{item}}</text>
			</view>
			<view class="title" style="margin-top: 20rpx;">方块2梅花2-红桃2-黑桃2</view>
			<view class="list2">
				<view class="item flex"  v-for="(item,index) in scaleList" :key="index">
				<text :style="{color:btnColor[index]}">{{scale[index]}}:</text>
				{{item}}</view>
			</view>
		</view>
	</u-modal>
</template>


<style lang="scss" scoped>
	.slot-content{
		width: 100%;
	}
	.scroll-view{
		height: 400rpx;
		width: 100%;
		.title{
			margin-bottom: 20rpx;
			color: #000;
			font-weight: 700;
			font-size: 40rpx;
		}
	}
	
	.list{
		  display: grid;
		   grid-template-columns: repeat(5, 1fr); 
		   grid-gap: 10rpx;
		   row-gap: 15rpx; 
		.item{
			padding: 3rpx 8rpx;
			border: 1px solid #eee;
		}
	}
	.list2{
		display: flex;
		justify-content: space-between;
		.item{
			padding: 3rpx 20rpx;
			border: 1px solid #eee;
		}
	}
	.title{
		margin-bottom: 20rpx;
		color: #000;
		font-weight: 700;
		font-size: 40rpx;
	}
</style>